<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <div id="app">
        <!-- 不论什么标签class属性加上btn 就会变成button按钮 -->
        <a href="#" class="btn btn-primary btn-lg">大小：btn-lg 颜色：btn-primary</a>
        <span class="btn btn-default btn-sm"> 大小：btn-sm 颜色：btn-default</span> <br />
        <div class="btn btn-success "> 大小：默认 颜色：btn-success</div> <br />
        <input class="btn btn-danger" value="大小：默认 颜色：btn-danger" /> <br />
        <p class="btn btn-warning">大小：默认 颜色：btn-warning</p> <br />
        <!-- link是变为链接形式 没有button样式 -->
        <p class="btn btn-link">大小：默认 颜色：btn-link</p> <br />
        <p class="btn btn-info" disabled>大小：默认 颜色：btn-info</p> <br />
    </div>


    <!-- 简单的分页器 -->
    <div class="container  paging">
        <div class="row">
            <div class="col-md-3">
                <a href="#" class="btn btn-default total">共10页</a>
                <a href="#" class="btn btn-default pagenum">第2页</a>
            </div>
            <div class="col-sm-9 text-right">
                <a href="#" class="btn btn-default first">首页</a>
                <a href="#" class="btn btn-default prev">上一页</a>
                <a href="#" class="btn btn-default next">下一页</a>
                <a href="#" class="btn btn-default last">尾页</a>
                <div class="btn btn-success pagenum" style="outline: none; border: none;width: 50px;" contenteditable>2
                </div>
                <select name="size" id="pagesize" class="btn btn-default"
                    style="outline: none; background-color: #ffffff;">
                    <option value="1">每页1条</option>
                    <option value="5">每页5条</option>
                    <option value="10">每页10条</option>
                    <option value="15">每页15条</option>
                    <option value="20">每页20条</option>
                    <option value="50">每页50条</option>
                </select>
            </div>
        </div>

    </div>
</body>
<script>
    $(function () {
        //第2页元素
        let pagenum1 = $('.paging .pagenum:eq(0)')
        //输入框
        let pagenum2 = $('.paging .pagenum:eq(1)')
        //输入框失去焦点
        pagenum2.blur(function () {
            let v = parseInt(pagenum2.html())
            console.log(v);
            pagenum1.html("第" + v + "页")
        })

        //点击首页 让pagenum1，pagenum2变为1
        $('.first').click(function () {
            pagenum1.html("第" + 1 + "页")
            pagenum2.html(1)
        })
        //点击上一页
        $(".prev").click(function () {
            let v = parseInt(pagenum2.html())
            v--
            if (v <= 0) {
                alert("没有上一页了！")
                v = 1
            }
            pagenum1.html("第" + v + "页")
            pagenum2.html(v)
        })

        //点击下一页
        $(".next").click(function () {
            //获得当前页码
            let v = parseInt(pagenum2.html())
            v++
            console.log(v)
            //获得总页数
            let str = $(".total").html().match(/\d/g).join("")
            console.log(str);
            let total = str ? parseInt(str) : 0
            //判断当前的页码是否超过总页数
            if (v > total) {
                alert("当前页码不能超过" + total)
                v = total
            }
            pagenum1.html("第" + v + "页")
            pagenum2.html(v)
        })
        //点击尾页
        $(".last").click(function () {
            //获得总页数
            let str = $(".total").html().match(/\d/g).join('')
            let total = str ? parseInt(str) : 0
            pagenum1.html("第" + total + "页")
            pagenum2.html(total)
        })
    })
</script>

</html>